<template>
	<div class="hello">
		<div class="logo">
			<img :src="headimg" alt="" />
		</div>
		<div class="form">
			<div class="item">
				<em class="username"></em>
				<input type="text" v-model="uname" @blur="findimg" placeholder="账号" />
			</div>
			<div class="item">
				<em class="pwd"></em>
				<input type="text" v-model="pwd" placeholder="密码" />
			</div>
			<a class="login" @click="login" href="javascript:;">登录</a>
			<p class="btm">
				<a class='regist' href="javascript:;" @click='regist'>我要注册</a>
				<span></span>
				<a class='forpwd' href="javascript:;">忘记密码</a>
			</p>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		data() {
			return {
				uname: '',
				pwd: '',
				headimg:'/src/assets/img/head1.jpg'
			}
		},
		create() {

		},
		methods: {
			login() {
				this.$store.commit('change', {
					key: 'uname',
					value: this.uname
				});
				this.$store.commit('change', {
					key: 'pwd',
					value: this.pwd
				});
				this.$store.commit('change', {
					key: 'head',
					value: this.headimg
				});
				//		this.$router.replace('/chat');
				console.log(this.$store)
				this.yanzheng();//验证格式
			},
			yanzheng() {
				if(this.uname === '' || this.pwd === '') {
					this.$layer.alert('请填写账号或密码！');
					return;
				}
				this.check();
			},
			findimg(){
				//匹配头像
				this.$axios.post('/api/findimg',{
					account:this.uname
				}).then((dt)=>{
					console.log(dt);
					dt=dt.data;
					console.log(dt);
					if(dt){
						this.headimg=dt;	
					}
					
				})
			},
			check(){
				//登录
				this.$axios.post('/api/login',{
					account: this.uname,
					password: this.pwd
				}).then((dt)=>{
					console.log(dt);
					dt=dt.data;
					if(dt.ok){
						this.$layer.msg(dt.msg);
						var that=this;
						setTimeout(function(){
							that.$router.replace('/chat');
						},1000)
					}else{
						this.$layer.msg(dt.msg);
					}
				})
			},
			regist(){
				//去注册
				this.$router.push('/regist');
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/scss" scoped lang='scss'>
	@import "../assets/style/_mixin";
	.hello {
		width: 100%;
		height: 100%;
		/*background: linear-gradient(to bottom,#b4b4f3,#5757de);*/
		background: url('../assets/img/login_bg.jpg') no-repeat center;
		padding-top: 100px/$ppr;
		box-sizing: border-box;
		.logo {
			width:180px/$ppr;
			height:180px/$ppr;
			margin:0 auto 100px/$ppr;
			img{
				width:100%;
				height: 100%;
				border-radius:50%;
			}
		}
		.form {
			width: 70%;
			margin: 30px/$ppr auto;
			.item {
				width: 100%;
				height: 70px/$ppr;
				line-height: 70px/$ppr;
				background: transparent;
				margin-bottom: 30px/$ppr;
				position: relation;
				em {
					position: absolute;
				}
				input {
					background: transparent;
					width: 100%;
					height: 100%;
					line-height: 100%;
					padding-left: 10px/$ppr;
					box-sizing: border-box;
					border: 1px solid #6897bd;
					border-radius: 40px/$ppr;
					outline: none;
					font-size: 28px/$ppr;
					color: #fff;
				}
				input::-webkit-input-placeholder {
					font-size: 28px/$ppr;
					color: #F1F1F1;
				}
			}
			.login {
				display: block;
				width: 100%;
				height: 60px/$ppr;
				line-height: 60px/$ppr;
				text-align: center;
				font-size: 28px/$ppr;
				background: #c342bf;
				margin: 40px/$ppr auto 0;
				color: #fff;
				border-radius: 40px/$ppr;
				box-shadow: 0 0 1px #fff;
			}
			.btm{
				width:100%;
				text-align: center;
				height: 50px/$ppr;
				line-height: 50px/$ppr;
				a{
					font-size: 24px/$ppr;
					color: #f1f1f1;
				}
				span{
					display: inline-block;
					width:1px;
					height: 20px/$ppr;
					background: #fff;
				}
			}
		}
	}
</style>